<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>极致丰富精美在线课程学习网站</title>
  <link rel="stylesheet" href="styles.css">
  <!-- 引入 Font Awesome 库以确保图标显示正常 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <header>
    <h1>在线课程学习平台</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">开发类课程</a></li>
        <li><a href="#">设计类课程</a></li>
        <li><a href="#">语言类课程</a></li>
        <li><a href="#">考试类课程</a></li>
        <li><a href="#">热门讲师</a></li>
      </ul>
    </nav>
    <div>
      <input type="text" id="search-box" placeholder="搜索您感兴趣的课程...">
      <button class="btn btn-primary"></button>
    </div>
    <div>
      <a href="1.html" class="btn btn-secondary">登录</a>
      <a href="2.html" class="btn btn-success">注册</a>
    </div>
  </header>
  <main>
    <div class="slider">
      <div class="slide active">
        <img src="1.webp" alt="Image 1">
      </div>
      <div class="slide">
        <img src="2.webp" alt="Image 2">
      </div>
      <div class="slide">
        <img src="3.webp" alt="Image 3">
      </div>
      <div class="slide">
        <img src="4.webp" alt="Image 4">
      </div>
      <div class="slider-controls">
        <button id="prevBtn"><i class="fas fa-chevron-left"></i></button>
        <button id="nextBtn"><i class="fas fa-chevron-right"></i></button>
      </div>
      <div class="slider-indicators">
        <button class="active"></button>
        <button></button>
        <button></button>
        <button></button>
      </div>
    </div>
    <h2 class="course-category">开发类热门课程</h2>
    <div class="course-cards row">
      <div class="col-md-4">
        <div class="course-card">
          <img src="5.jpg" alt="前端框架应用开发">
          <div>
            <h3>前端框架应用开发</h3>
            <p>精心打造的课程内容，涵盖前沿技术与实用技巧，助您快速提升专业能力。</p>
            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
            </div>
            <p class="course-reviews">陈庆源评价：这门课程是我学习道路上的明灯，知识点讲解深入浅出！</p>
            <a href="course-details.html" class="btn btn-info">查看详情</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="course-card">
          <img src="6.jpg" alt="课程 2">
          <div>
            <h3>程序设计</h3>
            <p>系统全面的课程体系，从基础到进阶，逐步引领您深入探索知识领域。</p>
            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <p class="course-reviews">刘伟博评价：课程内容丰富，实践案例很有启发性！</p>
            <a href="course-details.html" class="btn btn-info">查看详情</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="course-card">
          <img src="7.jpg" alt="课程 3">
          <div>
            <h3>专业技能综合评价</h3>
            <p>专注于实战应用，让您学以致用，快速在工作中取得成果。</p>
            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
              <i class="fas fa-star-half-alt"></i>
            </div>
            <p class="course-reviews">雷涛瑞评价：讲师讲解清晰，学习体验很棒！</p>
            <a href="course-details.html" class="btn btn-info">查看详情</a>
          </div>
        </div>
      </div>
    </div>
    <h2>课程详情</h2>
    <div class="course-details">
      <h2>课程 1 详细信息</h2>
      <p>本课程由行业资深专家精心设计，旨在为您提供全面且深入的知识体系。课程包括理论讲解、实际案例分析以及丰富的实践练习，让您在学习过程中不仅掌握知识，更能提升实际操作能力。</p>
      <p>课程时长：[2.5h]</p>
      <p>授课讲师：[廖宇坚]</p>
      <p>课程价格：[2.5¥]</p>
      <p>课程大纲：</p>
      <ul>
        <li>模块 1：基础知识讲解</li>
        <li>模块 2：进阶技术应用</li>
        <li>模块 3：项目实战演练</li>
      </ul>
      <div class="course-video-preview">
        <video controls width="100%">
          <source src="1.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
      <h3>用户评论</h3>
      <div class="user-comment">
        <h4>用户 1</h4>
        <p>这门课程的内容非常实用，对我的工作帮助极大！</p>
      </div>
      <div class="user-comment">
        <h4>用户 2</h4>
        <p>讲师的授课风格生动有趣，让枯燥的知识变得易于理解。</p>
      </div>
      <div class="user-comment">
        <h4>用户 3</h4>
        <p>课程的练习和作业设置合理，能够有效巩固所学知识。</p>
      </div>
      <button class="btn btn-primary">立即报名</button>
    </div>
    <h2>热门讲师</h2>
    <div class="instructor-cards row">
      <div class="col-md-4">
        <div class="instructor-card">
          <img src="8.jpg" alt="讲师 1">
          <div>
            <h3>刘文奇</h3>
            <p>拥有多年丰富的教学经验，擅长将复杂的概念简单化，深受学生喜爱。</p>
            <div class="courses-taught">教授课程：课程 1、课程 2 等</div>
            <p>教育背景：[毕业于清华大学计算机科学与技术专业，获得博士学位。曾在美国斯坦福大学进行为期两年的学术交流。]</p>
            <p>教学风格：[刘文奇讲师的教学风格严谨而富有逻辑。她注重基础知识的扎实掌握，善于通过深入浅出的讲解和实际案例分析，帮助学生理解复杂的计算机概念和算法。在课堂上，她鼓励学生积极提问，注重培养学生的独立思考和解决问题的能力。]</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="instructor-card">
          <img src="9.jpg" alt="讲师 2">
          <div>
            <h3>陈庆源</h3>
            <p>在行业内具有深厚的实践经验，能够将真实案例融入教学中。</p>
            <div class="courses-taught">教授课程：课程 3、课程 4 等</div>
            <p>教育背景：[毕业于上海交通大学软件工程专业，硕士学位。拥有多年在知名互联网企业的工作经验。]</p>
            <p>教学风格：[陈庆源讲师的教学风格生动活泼且充满激情。他擅长将枯燥的理论知识与有趣的实际项目相结合，让学生在实践中学习和应用。他的课堂氛围轻松愉快，注重与学生的互动和交流，善于激发学生的学习兴趣和创造力。]</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="instructor-card">
          <img src="10.jpg" alt="讲师 3">
          <div>
            <h3>廖宇坚</h3>
            <p>以独特的教学方法激发学生的学习兴趣，培养了众多优秀学员。</p>
            <div class="courses-taught">教授课程：课程 5、课程 6 等</div>
            <p>教育背景：[毕业于北京大学信息科学技术学院，获得学士学位，后在麻省理工学院获得计算机硕士学位。]</p>
            <p>教学风格：[廖宇坚讲师的教学风格细腻且耐心。她注重细节，对学生的问题解答详尽。善于引导学生自主探索，通过小组合作和项目竞赛的方式，培养学生的团队协作和竞争意识。她的课程评价通常以注重实践能力和创新思维培养而受到学生的高度赞扬。]</p>
          </div>
        </div>
      </div>
    </div>
    <h2>最新课程推荐</h2>
    <div class="new-course-cards row">
      <div class="col-md-4">
        <div class="new-course-card">
          <img src="11.jpg" alt="最新课程 1">
          <div>
            <h3>最新课程 1 C语言 </h3>
            <p>全新推出的热门课程，紧跟行业趋势，引领学习潮流。</p>
            <a href="course-details.html" class="btn btn-info">查看详情</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="new-course-card">
          <img src="12.jpg" alt="最新课程 2">
          <div>
            <h3>最新课程 2 计算机英语</h3>
            <p>创新的教学理念，独特的课程设计，带给您全新的学习体验。</p>
            <a href="course-details.html" class="btn btn-info">查看详情</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="new-course-card">
          <img src="13.jpg" alt="最新课程 3">
          <div>
            <h3>最新课程 3 java</h3>
            <p>融合多领域知识，开拓您的视野，提升综合能力。</p>
            <a href="course-details.html" class="btn btn-info">查看详情</a>
          </div>
        </div>
      </div>
    </div>
    <h2>学习资源下载</h2>
    <div class="download-links">
      <a href="resource1.pdf" class="btn btn-secondary">学习资料 1 下载</a>
      <a href="resource2.docx" class="btn btn-secondary">学习资料 2 下载</a>
      <a href="resource3.zip" class="btn btn-secondary">学习资料 3 下载</a>
      <a href="https://gitee.com/chen-qingyuan888/kanto-formation.git" class="">码云</a>
    </div>
  </main>

  <script src="script.js"></script>
</body>

</html>